<template>
  <!-- <TagsView /> -->

  <!-- 自评预览 -->
  <div class="container">
    <el-row class="" style="margin-bottom: 20px">
      <el-col :span="10" align="left">
        <span style="font-weight: bold;">{{data.allDetail.questionBank ? data.allDetail.questionBank.age : ''}}年度考核-{{data.allDetail.companyName}}- {{ route.query.type ? '差异化报告' : '自评预览'}} </span>
      </el-col>
      <el-col :span="14" align="right">
        <el-button @click="router.go(-1)">返回</el-button>
        <!-- <el-button type="primary">打印</el-button> -->
        <el-button type="primary" @click="down()">下载</el-button>
      </el-col>
    </el-row>


    <div class="banner" id='downloadPDF'>
            <p class="title">{{data.allDetail.questionBank ? data.allDetail.questionBank.age : ''}}年度考核</p>
            <p class="title2"><span>单位：{{data.allDetail.companyName}}</span>
              <span v-if="data.allDetail.selfPlusPoints != 0">自评总分：{{ data.allDetail.selfAddPoints}} + {{ data.allDetail.selfPlusPoints}}</span>
              <span v-if="data.allDetail.selfPlusPoints == 0">自评总分：{{ data.allDetail.selfAddPoints+ data.allDetail.selfPlusPoints}}</span>
              <span v-show="route.query.type == 'differentiating'" v-if="data.allDetail.repeatPlusPoints !=0">
                复评总分：{{ data.allDetail.repeatAddPoints }}+ {{ data.allDetail.repeatPlusPoints}}
              </span><span v-show="route.query.type == 'differentiating'"  v-if="data.allDetail.repeatPlusPoints ==0">
                复评总分：{{ data.allDetail.repeatAddPoints + data.allDetail.repeatPlusPoints}}
              </span>
            </p>
            <treeTable :table-columns="data.tableHead" :origin-data="data.tableData" :downFlag="data.downFlag"></treeTable>
        </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from 'vue'
import Catalog from '../../../project/components/Catalog/index.vue'
import * as api from '../../api/eachUnit'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { dataDictionary } from '@/api/dict'
import pubFc from '@/views/examineManage/utils'
import { deepClone } from '@/utils'
import treeTable from './common/tree'
import TagsView from '@/components/Layout/components/TagsView/index.vue'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
const route = useRoute()
const router = useRouter()
const data = reactive({
  allDetail:{} as any,//所有详情的数据
  tableData: [] as any,//关于考核题目的数据
  tableHead: [] as any,
  downFlag:0,
  originData: [
    {
      id: 'body1',
      nodeName: '节点1',
      chidrenList: [
        {
          id: 'body1-1',
          nodeName: '节点1-1',
          chidrenList: [
            {
              id: 'body1-1-1',
              nodeName: '节点1-1-1',
              chidrenList: [],
            },
            {
              id: 'body1-1-2',
              nodeName: '节点1-1-2',
              chidrenList: [],
            },
          ],
        },
        {
          id: 'body1-2',
          nodeName: '节点1-2',
          chidrenList: [
            {
              id: 'body1-2-1',
              nodeName: '节点1-1-1',
              chidrenList: [],
            },
            {
              id: 'body1-2-2',
              nodeName: '节点1-1-2',
              chidrenList: [],
            },
          ],
        },
      ],
    },
  ],
})
//下载
const down = async () => {
  const file = document.getElementById('downloadPDF') as HTMLDivElement;
  const canvas = await html2canvas(file);
  let contentWidth = canvas.width
  let contentHeight = canvas.height
  let pageHeight = contentWidth / 592.28 * 841.89
  let leftHeight = contentHeight
  let position = 0
  let imgWidth = 595.28
  let imgHeight = 592.28 / contentWidth * contentHeight
  let pageData = canvas.toDataURL('image/jpeg', 1.0)
  let PDF = new jsPDF(undefined, 'pt', 'a4')
  if (leftHeight < pageHeight) {
    PDF.addImage(pageData, 'JPEG', 0, 10, imgWidth, imgHeight)
  } else {
    while (leftHeight > 0) {
      PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
      leftHeight -= pageHeight
      position -= 841.89
      if (leftHeight > 0) {
        PDF.addPage()
      }
    }
  }
  PDF.save('年度考核' + '.pdf');
}
//获取数据
const getData = () => {
  api.getFaNumber({ id: route.query.bankId }).then((res) => {
    data.allDetail = res.data.data
    data.tableData = res.data.data.questionList
    objectSpanMethod()
    console.log('获取数据', data.allDetail)
  })
}
//处理数据结构
const objectSpanMethod = () => {
    let list = [] as any
    // 表头
    list.push({id:data.tableData[0].id, title: data.tableData[0].classType_text, rowSpan: 2, colSpan: 1})

    if(data.tableData[0].children.length > 0){
        list.push({id:data.tableData[0].children[0].id, title: data.tableData[0].children[0].classType_text, rowSpan: 2, colSpan: 1})
        if(data.tableData[0].children[0].children.length > 0){
            list.push({id:data.tableData[0].children[0].children[0].id, title: data.tableData[0].children[0].children[0].classType_text, rowSpan: 2, colSpan: 1})
        }
    }
    // data.tableData.forEach( e =>{
    //     list.push({id:e.id, title: e.classType_text, rowSpan: 2, colSpan: 1})
    //     if(e.children.length > 0){
    //         list.push({id:e.children[0].id, title: e.children[0].classType_text, rowSpan: 2, colSpan: 1})
    //         e.children.forEach( j =>{
    //             if(j.children.length > 0){
    //                 list.push({id:j.children[0].id, title:j.children[0].classType_text, rowSpan: 2, colSpan: 1})
    //             }
    //         })
    //     }
    // })
    data.tableHead = [list]
    console.log('tableHead',data.tableHead);

}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
  overflow-y: auto;
}
.banner {
  width: 100%;
  margin-top: 40px;
  .title {
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    font-size: 20px;
  }
  .title2 {
    text-align: center;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    padding: 0 90px;
  }
}
//   .table{
//     border: 1px solid ;
//     .table_head{
//         line-height: 40px;
//         border: 1px solid ;
//         text-align: center;
//     }
//     .table_one{
//         border: 1px solid ;
//         display: flex;
//         .table_two{
//             border: 1px solid ;
//         }
//     }
//   }
</style>
